<template>
  <div class="semifinals">
    <ul class="semifinals_one">
      <li class="first">半决赛</li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="0" :keyLength="0" :total="total" @valueChange="setTableList" v-if="isedit == 'no'" :valuedata="race_weedout_vslist[0]"></team-group>
            <team-group :key="0" :keyLength="0" :total="total" @valueChange="setTableList" v-if="isedit == 'yes' && race_weedout_vslist.length == (total/2)" :valuedata="race_weedout_vslist[0]"></team-group>
          </keep-alive>
        </div>
      </li>
    </ul>
    <ul class="semifinals_middle">
      <li class="first">决赛<br><span>冠军姓名</span></li>
      <ul></ul>
    </ul>
    <ul class="semifinals_one">
      <li class="first">半决赛</li>
      <li class="nor">
        <div class="vslist">
          <keep-alive>
            <team-group :key="1" :keyLength="1" :total="total" @valueChange="setTableList" v-if="isedit == 'no'" :valuedata="race_weedout_vslist[1]"></team-group>
            <team-group :key="1" :keyLength="1" :total="total" @valueChange="setTableList" v-if="isedit == 'yes' && race_weedout_vslist.length == (total/2)" :valuedata="race_weedout_vslist[1]"></team-group>
          </keep-alive>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import TeamGroup from './TeamGroup'
export default {
  components: {
    TeamGroup
  },
  props: {
    currentTab: {
      type: Number,
      default: 1
    },
    isedit: {
      type: String,
      default: 'yes'
    }
  },
  computed: {
    ...mapGetters({
      race_weedout_vslist: 'race_weedout_vslist'
    })
  },
  data () {
    return {
      total: 4,
      loading: true
    }
  },
  methods: {
    setTableList (val, keyLength) { // 更新对阵数据
      this.$set(this.race_weedout_vslist, keyLength, val)
    }
  }
}
</script>
<style lang="scss" scoped>
.semifinals{
  font-size: 12px;
  display: inline-table;
  span.leab{
    display: inline-block;
    height:18px;
    line-height:18px;
    padding: 0 5px;
    border-radius: 4px;
    margin-right:5px;
    color:#fff;
    background: #ff8b2f;
  }
  ul{
    float:left;
  }
  .semifinals_one{
    width:210px;
    li{
      border:1px solid #ebebeb;
      margin-top: -1px;
    }
    li.first{
      text-align: center;
      height:40px;
      line-height: 40px;
    }
    li.nor{
      height:239px;
      position: relative;
      .vslist{
        width:90%;
        padding: 0 5%;
        position: absolute;
        margin: auto;
        top: 50%; left: 50%;  
        -webkit-transform: translate(-50%,-50%);  
        -ms-transform: translate(-50%,-50%);  
        transform: translate(-50%,-50%);
        .vs_text{
          text-indent: 30px;
          margin: 20px 0;
        }
      }
      .score-btn{
        position: absolute;
        right:8px;
        top:50%;
        margin-top:-15px;
      }
    }
  }
  .semifinals_middle{
    width:412px;
    li{
      text-align: center;
    }
    li.first{
      height:65px;
      border-top:1px solid #ebebeb;
      border-bottom:1px solid #ebebeb;
      margin-top: -1px;
      line-height: 1.6;
      padding-top: 10px;
      span{
        color: #666;
      }
    }
    li.nor{
      .score-btn{
        margin: 65px 0 25px 0;
      }
    }
    ul{
      width:412px;
      height:213px;
      border-bottom:1px solid #ebebeb;
    }
  }
}
</style>
